<template>
  <div>
    <slot name="before"></slot>
    <el-table v-loading="p.loading" @selection-change="handleSelectionChange(p, $event)" :data="p.data" row-key="id"
      :row-class-name="p.rowClassName" :cell-class-name="p.cellClassName" stripe
      style="width: 100%" :max-height="p.maxHeight">

      <el-table-column v-if="p.selection" type="selection" width="55" />
      <template v-for="item in p.columns" :key="item.prop">
        <el-table-column :prop="item.prop" :width="item.width" :align="item.align ? item.align : 'center'"
          :fixed="item.fixed" :label="item.label" :class-name="item.className" :min-width="item.minWidth"
          :sortable="item.sortable ? item.sortable : false">
          <template #default="scope">
            <slot v-if="item.slot" :name="item.prop" :item="item" :row="scope.row"></slot>
            <span v-else-if="item.prop == 'id'">{{ miniId(scope.row[item.prop]) }}</span>
            <span v-else>{{ scope.row[item.prop] ? scope.row[item.prop] : '-' }}</span>
          </template>
        </el-table-column>
      </template>
      <el-table-column type="expand" v-if="p.expand">
        <template #default="scope">
          <slot name="expand" :row="scope.row"></slot>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="p.pageSize" class="pagination">
      <el-pagination v-model:currentPage="p.current" v-model:page-size="p.pageSize" background
        layout="total, sizes, prev, pager, next, jumper" :total="p.total" @size-change="p.loadData()"
        @current-change="p.loadData()" />
    </div>
    <slot name="after"></slot>
</div>
</template>

<script lang="ts" src="./table.ts">

</script>

<style scoped lang="scss">
.pagination {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 20px;
}
</style>
